import i18nItem_scss from './index.module.scss'
import { setItem, getItem } from '@/utils/auth'
import useTitle from '@/hooks/useTitle'
import { Action } from 'element-plus'
export default defineComponent({
  name: 'SetI18n',

  setup() {
    const { getTitle, t } = useTitle()
    const changeI18n = (row: string) => {
      ElMessageBox.confirm(t('login.isOk'), t('common.tip'), {
        type: 'info',
        callback: (action: Action) => {
          if (action === 'confirm') {
            setItem('localeLang', row)
            window.location.reload()
          }
        }
      })
    }

    return () => (
      <span>
        <span
          class={
            getItem('localeLang') === 'zhCn' || !getItem('localeLang')
              ? i18nItem_scss.islanguageWeight
              : i18nItem_scss.islanguageNomal
          }
          onClick={() => getItem('localeLang') !== 'zhCn' && changeI18n('zhCn')}
        >
          {getTitle('home.zh')}
        </span>
        /
        <span
          class={
            getItem('localeLang') === 'en'
              ? i18nItem_scss.islanguageWeight
              : i18nItem_scss.islanguageNomal
          }
          onClick={() => getItem('localeLang') !== 'en' && changeI18n('en')}
        >
          {getTitle('home.en')}
        </span>
      </span>
    )
  }
})
